<template>
  <div class="box">
      <h2>室内图/视频</h2>
      <div class="item">
          <div @click="onload" class="push">+</div>
          <div class="imgs"><img :src="imgs" alt=""></div>
      </div>
      
      <h2>户型图</h2>
      <div class="item">
          <div @click="onload2" class="push">+</div>
          <div class="imgs"><img :src="imgs2" alt=""></div>
      </div>
      <h2>室外图</h2>
      <div class="item">
          <div @click="onload3" class="push">+</div>
          <div class="imgs"><img :src="imgs3" alt=""></div>
      </div>
      <h2>设置封面图</h2>
      <div class="item">
          <div @click="onload4" class="push">+</div>
          <div class="imgs"><img :src="imgs4" alt=""></div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            imgs:'',
            imgs2:'',
            imgs3:'',
            imgs4:'',
        }
    },
    methods: {
        onload(){
            wx.chooseImage({
                success:(res)=>{
                    console.log(res.tempFilePaths[0]);
                    this.imgs = res.tempFilePaths[0]
                    console.log(this.imgs);
                }
            })
        },
        onload2(){
            wx.chooseImage({
                success:(res)=>{
                    console.log(res.tempFilePaths[0]);
                    this.imgs2 = res.tempFilePaths[0]
                    console.log(this.imgs);
                }
            })
        },
        onload3(){
            wx.chooseImage({
                success:(res)=>{
                    console.log(res.tempFilePaths[0]);
                    this.imgs3 = res.tempFilePaths[0]
                    console.log(this.imgs);
                }
            })
        },
        onload4(){
            wx.chooseImage({
                success:(res)=>{
                    console.log(res.tempFilePaths[0]);
                    this.imgs4 = res.tempFilePaths[0]
                    console.log(this.imgs);
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.box{
    width: 100%;
    height: 100%;
    h2{
        font-size: 20px;
        margin: 20rpx;
    }
    .item{
        margin: 20rpx;
        width: 100%;
        height: 400rpx;
        display: flex;
        align-items: center;
        .push{
            width: 260rpx;
            height: 260rpx;
            background: rgb(228, 228, 228);
            text-align: center;
            line-height: 230rpx;
            font-size: 100rpx;
            color: rgb(201, 198, 198);
        }
        .imgs{
            width: 260rpx;
            height: 260rpx;
            >img{
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>